<template>
  <div class="userinfo-box">
    <nav-top style="position: fixed"></nav-top>
    <div class="userinfo-con">
      <div class="userbg">
        <div class="user-hander">
          <div class="hander" style="cursor: pointer;" @click="changeAver" >
            <el-avatar :src="user.handUrl" :size="70"></el-avatar>
            <input
              type="file"
              class="file"
              ref="cgHander"
              @change="update($event)"
              name="file"
            />
          </div>
          <p >{{ user.name }}</p>

          <span
       
            class="cardCase"
            placeholder="user.cardCase"
            ref="inputCard"
            style="cursor: pointer"
          >{{ user.cardCase }}</span>
        </div>
      </div>

      <div class="user-data">
    
        <div class="empty"></div>
        <user-detail
        @uploadView="isUp = true"
        @manageView = "isDel = !isDel , isUpdate = !isUpdate"
        ></user-detail>
      </div>

      <div class="vedio-con">
        <el-tabs v-model="activeName"  @tab-click="handleClick" >
          <el-tab-pane
            :key="item.name"
            v-for="(item) in tags"
            :label="item.title"
            :name="item.name"
          >
          <div class="detailparent">
            <div 
            :key="video.id"
            class="detailitem"
            v-for="video in item.content">
            <span v-if="isDel && video.uid == user.id "
              @click="del(video.id)"
            ><i class="el-icon-delete"></i></span>

            <span 
            v-if="isUpdate && (video.status == 0 || video.status == 3 )"
             
            ><i  @click="publish(video.id)" class="el-icon-s-claim" style="margin-right: 1vw;"></i>
            <i  @click="vdate = video , isUp = true" class="el-icon-edit"></i>
          </span>

              <cover
                :detailitem="video"
              />
              
            </div>
          
          </div>
          </el-tab-pane>
        </el-tabs>
      </div>

      <div class="upView" v-if="isUp">
        <upload
        :video="vdate"
        @uploadViewClose= " isUp = false,vdate = null"
  
        ></upload>
      </div>
    </div>
  </div>
</template>

<script>
import NavTop from "@/components/common/Navbar.vue";
import userDetail from "@/components/userComponent/userDetail";

import Upload from "@/components/userComponent/upload.vue";
import cover from "@/components/common/cover";
import { mapGetters } from "vuex";
export default {
  components: {
    NavTop,
    userDetail,
    Upload,
    cover
  },
  computed: {
    ...mapGetters(["baseUrl", "isLogin", "user"]),
  },
  data() {
    return {
      tags: null,
      activeName:0,
      isUp:false,
      isDel:false,
      isUpdate:false,
      vdate:null
    };
  },
  methods: {
    init() {
      this.tags = [
        {
          title: "我的发布",
          url: "su",
          content: null,
          status:2,
          name:'0'
        },
        {
          title: "我的草稿",
          url: "su",
          content: null,
          status:0,
          name:'1'
        },
        {
          title: "我的喜欢",
          url: "likeu",
          content: null,
          status:'',
          name:'2'
        },
        {
          title: "我的收藏",
          url: "cu",
          content: null,
          status:'',
          name:'3'
        },
        {
          title: "待审核",
          url: "su",
          content: null,
          status:1,
          name:'4'
        },
        {
          title: "被驳回",
          url: "su",
          content: null,
          status:3,
          name:'5'
        },
   
      ];
        this.getsVideo(this.tags[0])
    },
   async publish(vid){
      var obj = {
        vid:vid ,
        newStatus:1
      }
      const { data: res } = await this.$http.post("/videos/s",obj)
      if(res.code == 200) {
        this.$msg.fail("上传成功")
      }
    },

    handleClick() {
       this.getsVideo(this.tags[this.activeName])
      },

    async getsVideo(item) {
      var obj = {
        s: item.status ,
        u:this.user.id
      }
    
       const { data: res } =  await this.$http.get(
        "/videos/" + item.url , 
        { params: obj }
      );
      
      if (res.code == 200) {
          this.tags[item.name].content = res.data
      }
    },
    changeAver() {
        this.$refs.cgHander.click();
    },

    async update(e) {
      let file = e.target.files[0];
      let body = new FormData(); 
      body.append("aver", file, file.name); 
      body.append("uid", this.user.id); 
      let config = {
        headers: { "Content-Type": "multipart/form-data" },
      }; 
      const { data: res } = await this.$http.post(
        "/user/aver" ,
        body,
        config
      );
      if (res.code == 200) {
        this.$store.commit('setUser', res.data);
      }
    },

    // 删除
    async del(id) {
      const { data: res } = await this.$http.delete("/videos/"+id)
      if(res.code == 200) {
        this.$msg.fail("删除成功")
      }
    }
  },

  

  created() {
    this.init();
  },

};
</script>


<style lang = "less" scoped>
.userinfo-box {
  width: 100%;
  background-color: rgb(235, 235, 235);
  background: url("/src/static/imgs/userinfo.bg.jpg") top/cover no-repeat fixed;
}
.userinfo-con {
  margin-left: 10vw;
  width: 80%;
  background-color: white;
}
.userbg {
  transform: translate(0, 3.5vw);
  height: 10vw;
  background: url("/images/userinfohanderbg.webp") no-repeat;
  background-size: cover;
  box-shadow: 0 -2vw 2vw 1px rgba(31, 30, 30, 0.2) inset,
    0 -4vw 1vw 1px rgba(31, 30, 30, 0.1) inset,
    0 -3vw 1vw 1px rgba(31, 30, 30, 0.2) inset;
  .user-hander {
    transform: translate(1vw, 5.8vw);
    width: 90%;

    p {
      position: absolute;
      top: -1vh;
      left: 5.5vw;
      color: white;
      font-size: 1.2vw;
    }
    .hander {
      width: 5vw;
      height: 5vw;
    }
  }
  .cardCase {
    position: absolute;
    top: 5vh;
    margin-left: 5.5vw;

    color: white;
    padding-left: 0.5vw;

  }
  .file {
    width: 0;
    height: 1%;
  }
}

.user-data {
  transform: translate(0, 3.5vw);
  display: flex;
  height: 8vw;

  .empty {
    flex: 1;
  }
}


.vedio-con {
  margin-left: 2vw;
margin-top: 2vh;
  width: 90%;
 

  .detailparent {
  width: 90%;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start !important;
  height: 53vh;
  overflow-y: scroll;
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */


  .detailitem {
    margin: 1vw 0;
    height: 25vh ;
    width: 16vw ;
    margin-left: 3vw;


    span {
      padding: 0 .5vw;
      color: red;
      float: right;
      cursor: pointer;
    }
  }
}
}

.upView {
  
  position: absolute;
  top: 20%;
  left: 30%;
  width: 40vw;
  height: 70vh;
 
}
</style>